<!DOCTYPE html>
<html>
<head>
    <title>Street Lamp Static Force Analysis</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: white;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="550"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Define coordinates and dimensions
        const postX = 130;
        const postTopY = 80;
        const postBottomY = 500;
        const groundY = 500;

        const hingeA_Y = 120;
        const hingeB_Y = 190;
        const hingeC_X = 380;
        const hingeC_Y = 120;
        
        const bracePointX = postX + (hingeC_X - postX) * 0.55;

        // Set common styles
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineCap = 'round';
        ctx.lineJoin = 'round';

        // Draw the ground
        ctx.lineWidth = 6;
        ctx.beginPath();
        ctx.moveTo(0, groundY);
        ctx.lineTo(canvas.width, groundY);
        ctx.stroke();

        // Draw ground hatching
        ctx.lineWidth = 2.5;
        for (let i = 10; i < canvas.width; i += 20) {
            ctx.beginPath();
            ctx.moveTo(i, groundY + 20);
            ctx.lineTo(i + 20, groundY);
            ctx.stroke();
        }

        // Draw the vertical post
        ctx.lineWidth = 5;
        ctx.beginPath();
        ctx.moveTo(postX - 6, postTopY);
        ctx.lineTo(postX - 6, postBottomY);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(postX + 6, postTopY);
        ctx.lineTo(postX + 6, postBottomY);
        ctx.stroke();

        // Draw the bracket structure
        // Top horizontal member (AC) - drawn as two parallel bars
        ctx.lineWidth = 4;
        ctx.beginPath();
        ctx.moveTo(postX, hingeA_Y - 7);
        ctx.lineTo(hingeC_X, hingeC_Y - 7);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(postX, hingeA_Y + 7);
        ctx.lineTo(hingeC_X, hingeC_Y + 7);
        ctx.stroke();

        // Diagonal members from B
        ctx.lineWidth = 10;
        // Main diagonal (BC)
        ctx.beginPath();
        ctx.moveTo(postX, hingeB_Y);
        ctx.lineTo(hingeC_X, hingeC_Y);
        ctx.stroke();
        // Brace diagonal (to midpoint of AC)
        ctx.beginPath();
        ctx.moveTo(postX, hingeB_Y);
        ctx.lineTo(bracePointX, hingeC_Y);
        ctx.stroke();
        
        // Draw the hinges (joints)
        function drawHinge(x, y, radius) {
            ctx.beginPath();
            ctx.arc(x, y, radius, 0, 2 * Math.PI);
            ctx.fillStyle = 'white';
            ctx.fill();
            ctx.lineWidth = 2;
            ctx.strokeStyle = 'black';
            ctx.stroke();
        }
        drawHinge(postX, hingeA_Y, 8);
        drawHinge(postX, hingeB_Y, 8);
        drawHinge(hingeC_X, hingeC_Y, 12);
        
        // Draw the lamp
        ctx.fillStyle = 'black';
        ctx.strokeStyle = 'black';
        
        // Lamp hanger
        const lampHangerY = hingeC_Y + 12;
        ctx.lineWidth = 6;
        ctx.beginPath();
        ctx.arc(hingeC_X, lampHangerY, 10, 0, Math.PI);
        ctx.stroke();

        // Lamp body
        const lampTopY = lampHangerY + 10;
        
        // Lamp cap (filled shape)
        ctx.beginPath();
        ctx.arc(hingeC_X, lampTopY, 16, Math.PI, 2 * Math.PI);
        ctx.fill();

        // Lamp glass (stroked shape)
        ctx.lineWidth = 8;
        ctx.beginPath();
        ctx.arc(hingeC_X, lampTopY, 28, 0, Math.PI);
        ctx.stroke();

        // White band in the middle of the glass
        ctx.fillStyle = 'white';
        ctx.fillRect(hingeC_X - 28, lampTopY - 2, 56, 5);

        // Draw labels
        ctx.fillStyle = 'black';
        ctx.font = 'bold 36px serif';
        ctx.fillText('A', postX - 50, hingeA_Y + 5);
        ctx.fillText('B', postX - 50, hingeB_Y + 10);
        ctx.fillText('C', hingeC_X + 25, hingeC_Y + 10);

    </script>
</body>
</html>